<!--
 * @Descripttion: 
 * @version: 
 * @Author: lyw
 * @Date: 2022-02-15 00:55:09
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-21 15:58:06
-->
<template>
  <div class="main_page">
    <el-container class="content">
      <div class="header">
        <div class="title">{{ this.fun }}</div>
        <el-button class="other" type="text" @click="exit">退出登录</el-button>
      </div>
      <el-container>
        <el-aside>
          <el-menu
            :default-active="this.$router.path"
            router
            mode="vertical"
          >
            <el-menu-item
              v-for="(item, i) in navList"
              :key="i"
              :index="item.name"
            >
              {{ item.navItem }}
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="background-color: #fff">
          <router-view />
        </el-main>
      </el-container>
      </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fun: "个人中心",
      navList: [
        { name: "/person", navItem: "个人信息" },
        { name: "/person/order", navItem: "我的订单" },
        { name: "/person/favorite", navItem: "收藏夹" },
        { name: "/person/shopManage", navItem: "店铺管理" },
        { name: "/person/information", navItem: "消息" },
      ],
    };
  },
  methods: {
    exit() {
      this.$store.state.user.account_id = undefined
      localStorage.removeItem('Account_id')
      this.$router.push('/')
    }
  },
};
</script>
<style lang="less" scoped>
.main_page {
  width: @width-content;
  margin: 0 auto;
  background-color: red;
  background-color: #fff;
  .content{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .header {
      background-color: #67c23a;
      height: 60px;
      line-height: 60px;
      color: #fff;
      .title{
        padding-left: 20px;
        float: left;
      }
      .other{
        height: 100%;
        float: right;
        padding-right: 20px;
        color: #fff;
        font-size: 1rem;
      }
    }
    .el-aside {
      width: 20%;
      text-align: left;
      .el-menu {
        background-color: #f4f5f6;
        min-height: 1100px;
        .el-menu-item {
          font-weight: 700;
        }
      }
    }
    .el-main{
      width: 80%;
    }
  }
}
</style>